<template>
	<view :style="skin" class="content mobileRegister">
		<HeadBigTitle :title="title" />
		<view class="formBox">


			<text class="u-demo-block__title">{{$t('login.phoneNumber')}}</text>
			<view class="u-demo-block__content">
				<u-input v-model="userObjCode.userNameCode" border="bottom" :clearable="true"
					:placeholder="$t('login.inputPhone')">
					<text slot="suffix" @click="handleSendCode" class="sendCode">
						<text v-if="!timerShow">{{$t('login.sendCode')}}</text>
						<text v-else>{{oneMinutes}}S</text>
					</text>
				</u-input>
			</view>

			<text class="u-demo-block__title">{{$t('login.code')}}</text>
			<view class="u-demo-block__content">
				<u-input v-model="userObjCode.code" border="bottom" maxlength="6"
					:placeholder="$t('login.inputCode')"></u-input>
			</view>


			<text class="u-demo-block__title">{{$t('login.setPass')}}</text>
			<view class="u-demo-block__content">
				<u-input v-model="userObjCode.pass" border="bottom" :password="true"
					:placeholder="$t('login.inputPass')">
				</u-input>
			</view>

			<text class="u-demo-block__title">{{$t('login.confirmPass')}}</text>
			<view class="u-demo-block__content">
				<u-input v-model="userObjCode.confirmPass" border="bottom" :password="true"
					:placeholder="$t('login.confirmPass')">
				</u-input>
			</view>
		</view>

		<view class="btnModule">

			<u-button color="var(--subjectColor)" @click="handleRegister">{{$t('login.submit')}}</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import HeadBigTitle from '@/components/HeadBigTitle.vue'
	import {
		registerChcCode,
		registerCode,
		udPwd
	} from '@/api/login.js'
	import {
		encryption
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				regRole: 1, //注册角色 0 普通会员 1 代理商
				title: '代理商注册',
				timer: null,
				timerShow: false,
				oneMinutes: 60,
				checkList: [],
				disableCode: false,
				isPass: true,
				btnPass: true,
				confirmPass: true,
				sendType: '',
				userObjCode: {
					userNameCode: '',
					code: '',
					pass: '',
					confirmPass: '',
				},


			}
		},

		watch: {
			userObjCode: {
				handler: function(newV, oldV) {
					if (uni.$u.test.mobile(newV.userNameCode)) {
						this.sendType = 'phone'
					} else {
						this.sendType = ''
					}
					this.$refs.uFormCode && this.$refs.uFormCode.validate().then(res => {
						this.disableCode = true
						if (this.checkList.length > 0) {
							this.btnPass = false
						} else {
							this.btnPass = true
						}
					}).catch(err => {
						this.disableCode = false
						this.btnPass = true
					})
				},
				deep: true
			},
		},

		methods: {
			checkboxChange(e) {
				console.log(e);
				if (e.length > 0 && this.disableCode) {
					this.btnPass = false
				} else {
					this.btnPass = true
				}
			},
			skipWebView(type) {
				uni.navigateTo({
					url: `/pages/webview/webview?type=${type}`
				})
			},
			sendCode() {
				registerCode({
					mobile: this.userObjCode.userNameCode
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.timerShow = true
						let that = this
						uni.showToast({
							title: res.data,
							duration: 4000,
							icon: 'none'
						})
						clearInterval(that.timer);
						this.timer = setInterval(() => {
							that.oneMinutes--
							if (that.oneMinutes <= 0) {
								that.oneMinutes = 60;
								that.timerShow = false;
								clearInterval(that.timer);
							}
						}, 1000)


					} else {
						this.timerShow = false
						clearInterval(this.timer)
						this.oneMinutes = 60
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			handleRegister() {



				if (this.userObjCode.userNameCode == '') {
					uni.$u.toast(this.$t('login.inputPhone'))
					return false
				}
				if (this.userObjCode.code == '') {
					uni.$u.toast(this.$t('login.inputCode'))
					return false
				}
				if (this.userObjCode.pass == '' || this.userObjCode.pass.length < 6) {
					uni.$u.toast(this.$t('login.inputPass'))
					return false
				}

				if (this.userObjCode.confirmPass == '') {
					uni.$u.toast(this.$t('login.confirmPass'))
					return false
				}
				if (this.userObjCode.confirmPass != this.userObjCode.pass) {
					uni.$u.toast(this.$t('login.enterPass'))
					return false
				}


				udPwd({
					phone: this.userObjCode.userNameCode,
					code: this.userObjCode.code,
					password: this.userObjCode.pass,
					checkPassword: this.userObjCode.confirmPass
				}).then(res => {
					console.log(res);
					if (res.code == 0 && res.success) {
						uni.showToast({
							title: 'success',
							icon: 'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})




			},
			handleSendCode() {
				if (this.userObjCode.userNameCode != '') {
					if (this.timerShow) return false
					// this.timerShow = true
					this.sendCode()

				} else {
					uni.$u.toast(this.$t('login.inputPhone'))
				}

			},

		},
		onLoad(options) {
			this.title = this.$t('login.RetrievePassword')
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		components: {
			HeadBigTitle
		}

	}
</script>

<style scoped lang="scss">
	.mobileRegister {


		.formBox {
			padding: 0 32px;
			box-sizing: border-box;
			margin-top: 16px;

			.u-demo-block__content {
				background-color: #f8f8f8;
				border-radius: 4px;
				margin-bottom: 20px;
				margin-top: 10px;
				height: 40px;
				padding: 8px;
				box-sizing: border-box;

			}

			.sendCode {

				width: 70px;
				text-align: center;

				text {
					color: var(--subjectColor);
					font-size: 14px;

				}
			}

			.errInfo {
				font-size: $uni-fz-12;
				color: $uni-color-red;
				line-height: 1.5;
			}



			.passIcon {
				color: var(--subtopicTextColor) !important;
				font-size: 18px;
			}


		}

		.modelChange {
			width: 100%;
			height: 53px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: var(--subjectColor);
			font-size: 14px;
			padding: 0 32px;
			box-sizing: border-box;
			margin-top: 16px;
		}

		.btnModule {
			width: 100%;
			height: 44px;
			padding: 0 60rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-evenly;
			position: fixed;
			bottom: 16px;


			/deep/.u-button {
				height: 52px;
				font-size: 17px;
			}
		}

		.footer {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 16px;
			height: 57px;

			.tips {

				width: 100%;
				height: 27px;
				text-align: center;

				font-size: 18px;
				line-height: 27px;
				color: var(--subtopicTextColor);

				.powered {
					font-size: $uni-fz-12;
					line-height: $uni-fz-12;
					margin-right: 4px;
				}
			}

			.checkboxBox {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				color: var(--subjectTextColor);

				.skipWebView {
					font-size: 14px;
					line-height: 14px;
					color: var(--subjectColor);
				}
			}

		}
	}
</style>